<template>
  <div>
    <div class="bind-box flex-row-sb-center" style="border-bottom: 1px solid #F3F3F3;">
      <div>
        <label class="title">手机号</label>
        <span class="text">{{phone | telEncryption}}</span>
      </div>
      <div>
        <button v-if='!reSend' class="get-code" @click="getValidCode">获取验证码</button>
        <button v-else class="get-code resend" disabled>{{seconds}}s后重新获取</button>
      </div>
    </div>
    <div class="bind-box">
      <label class="title">验证码</label>
      <input class="code-inp" v-model="validate.validate_code" @input="isValid" placeholder="请输入验证码" />
    </div>
    <button :class="['valid-btn', valid? 'valid' : '']" @click="validationCodeIsValid" :disabled="!valid">验证后绑定新手机号</button>
  </div>
</template>

<script>
import { sendValidCode, validationCode } from '@/api/elm-data'
export default {
  name: 'bind-phone',
  data() {
    return {
      phone: '',
      valid: false,
      validate: {
        validate_code: '',
        validate_token: ''
      },
      reSend: false,
      seconds: 60
    }
  },
  created() {
    this.phone = this.$route.query.phone
  },
  methods: {
    async getValidCode() {
      try {
        const userID = window.sessionStorage.getItem('USER_ID')
        const { data } = await sendValidCode(userID)
        this.validate.validate_token = data.validate_token
        this.$toast('验证码已发送', 'center')
        this.reSend = true
        const interval = setInterval(() => {
          this.seconds--
          if(this.seconds <=0) {
            clearInterval(interval)
            this.reSend = false
            this.seconds = 60
          }
        }, 1000)
      }catch(e) {
        this.reSend = false
        this.$toast('验证码发送失败', 'center')
      }
    },
    isValid() {
      if(this.validate.validate_code.length === 6) {
        this.valid = true
      }else {
        this.valid = false
      }
    },
    async validationCodeIsValid() {
      try{
        const { data } = await validationCode(window.sessionStorage.getItem('USER_ID'), this.validate)
        if(data) {
          this.$router.push('/changephone')
        }else {
          this.$toast('验证码错误')
        }
      }catch(e) {
        this.$toast('验证码错误')
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    if(from.path === '/personalinfo' || from.path === '/') {
      next()
    }else {
      if(window.sessionStorage.getItem('token')) {
        next('/index')
      }else {
        next('/login')
      }
    }
  }
}
</script>

<style scoped>
  .bind-box {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    background-color: #fff;
  }
  .title {
    padding: 0 20px;
    font-size: 32px;
  }
  .text {
    font-size: 30px;
  }
  .get-code {
    padding: 10px 20px;
    background-color: #0097FF;
    color: #fff;
    font-size: 28px;
  }
  .resend {
    background-color: #D8D8D8;
  }
  .code-inp {
    background-color: transparent;
    border: none;
    font-size: 28px;
  }
  .valid-btn {
    display: block;
    margin: 20px auto;
    padding: 20px 0;
    width: 90%;
    background-color: #e3e3e3;
    color: #fff;
    font-size: 36px;
  }
  .valid {
    background-color: #00D762;
  }
</style>
